<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script src="jslib/mustache.js"></script>
  <div id="container">
  </div>
  <script>
    var template = `
    <ul>
    {{#arr}}
    <li>{{name}}的爱好是:
      <ol>
        {{#hobbies}}
        <li>{{.}}</li>
        {{/hobbies}}
      </ol>
    </li>
    {{/arr}}
  </ul>
    `;
    var data = {
      arr: [
        { 'name': '小明', 'age': 12, 'hobbies': ['游泳', '羽毛球'] },
        { 'name': '小红', 'age': 11, 'hobbies': ['编程', '写作文', '看报纸'] },
        { 'name': '小强', 'age': 13, 'hobbies': ['打台球'] },
      ]
    };
    const domStr = Mustache.render(template, data);
    var container = document.getElementById('container');
    container.innerHTML = domStr
  </script>
</body>

</html>